<!DOCTYPE html>

<html>
    <head>
        <title>无缝滚动3</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin:0;padding: 0;list-style-type: none;text-decoration: none;}
            div{width:960px;height: 540px;border: 5px solid #000;margin: 30px auto;position: relative;overflow: hidden;}
            ul{width:8640px;height: 540px;left:0;top:0;position: absolute;}
            ul li{width: 960px;height: 540px;float: left;cursor: pointer;}
            ul li img{width: 100%;height: 100%;}
            ol{width: 320px;height: 40px;background: #fff;border-radius:20px;position: absolute;left: 50%;bottom: 20px;margin-left: -160px;}
            ol li{width: 30px;height: 30px;margin: 5px;float: left;background: #ccc;border-radius: 50%;cursor: pointer;}
            .select{background: #ff0;}
            a{width: 80px;height: 100px;text-align: center;line-height: 100px;font-size: 18px;background: #fff;color:#000;display: none;}
            .left{position: absolute;left: 0;top: 50%;margin-top: -50px;}
            .right{position: absolute;right: 0;top: 50%;margin-top: -50px;}
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/2.jpg" alt=""></li>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/6.jpg" alt=""></li>
                <li><img src="img/7.jpg" alt=""></li>
                <li><img src="img/8.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="select"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li> 
                <li></li> 
            </ol>
            <a href="javascript:;" class="left">left</a>
            <a href="javascript:;" class="right">right</a>
        </div>
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var index = 0;
            $("ul li").first().clone();
            $("ul").append($("ul li").first().clone());
            var li_l = $("ul li").length;
            var li_w = $("ul li").outerWidth(true);
            var tick;
            $("ol li").click(function () {
                index = $(this).index();
                $("ul").animate({"margin-left": -li_w * index}, 5000);
                $("ol li").eq(index).addClass("select").siblings().removeClass("select");
            });
            $(".left").click(function () {
                index--;
                if (index < 0) {
                    $("ul").css({"margin-left": -li_w * (li_l - 1)});
                    index = li_l - 2;
                    $("ul").stop().animate({"margin-left": -li_w * index},5000);
                    $("ol li").eq(index).addClass("select").siblings().removeClass("select");
                }
                $("ul").stop().animate({"margin-left": -li_w * index}, 5000);
                $("ol li").eq(index).addClass("select").siblings().removeClass("select");
            });
            $(".right").click(function(){
                index++;
                if(index===li_l-1){
                 $("ol li").eq(0).addClass("select").siblings().removeClass("select");    
                }else
                    if(index>li_l-1){
                 $("ul").css({"margin-left":0});
                 index=1;
                }
                $("ul").stop().animate({"margin-left": -li_w * index}, 5000);
             $("ol li").eq(index).addClass("select").siblings().removeClass("select");
            });
            tick=setInterval(function(){
              $(".right").click(); 
            },10000);
            $("div").hover(function(){
                $("a").show();
                clearInterval(tick);
            },function(){
                $("a").hide();
                 tick=setInterval(function(){
              $(".right").click(); 
            },10000);
            });
        </script>
    </body>
</html>
